<template>
  <el-dialog title="设备详情" :model-value="visible" width="900px" append-to-body @close="handleClose">
    <el-tabs v-model="activeTab" v-if="data">
      <el-tab-pane label="基本信息" name="basic">
        <el-descriptions :column="3" border>
          <el-descriptions-item label="设备ID">{{ data.id }}</el-descriptions-item>
          <el-descriptions-item label="设备编号">{{ data.deviceCode }}</el-descriptions-item>
          <el-descriptions-item label="设备ICCID">{{ data.iccid }}</el-descriptions-item>
          <el-descriptions-item label="产品ID">{{ data.productId }}</el-descriptions-item>
          <el-descriptions-item label="状态">
            <el-tag :type="getStatusTag(data.status)">{{ getStatusText(data.status) }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="创建时间">{{ data.createTime }}</el-descriptions-item>
          <el-descriptions-item label="更新时间">{{ data.updateTime }}</el-descriptions-item>
          <el-descriptions-item label="创建人">{{ data.createBy }}</el-descriptions-item>
          <el-descriptions-item label="更新人">{{ data.updateBy }}</el-descriptions-item>
          <el-descriptions-item label="备注" :span="3">{{ data.remark || '无' }}</el-descriptions-item>
        </el-descriptions>
      </el-tab-pane>
      <el-tab-pane label="实时数据" name="realtime">
        <el-empty description="实时数据监控功能开发中" />
      </el-tab-pane>
      <el-tab-pane label="历史数据" name="history">
        <el-empty description="历史数据查询功能开发中" />
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import type { DeviceInfo } from '../types'

// Props
interface Props {
  visible: boolean
  data: DeviceInfo | null
  activeTab?: string
}

const props = withDefaults(defineProps<Props>(), {
  visible: false,
  data: null,
  activeTab: 'basic'
})

// Emits
const emit = defineEmits(['update:visible', 'update:activeTab'])

// 当前激活的标签页
const activeTab = ref(props.activeTab)

// 监听activeTab变化
watch(activeTab, (newVal) => {
  emit('update:activeTab', newVal)
})

// 监听props.activeTab变化
watch(() => props.activeTab, (newVal) => {
  activeTab.value = newVal
})

// 关闭对话框
const handleClose = () => {
  emit('update:visible', false)
}

// 获取状态标签样式
const getStatusTag = (status: number) => {
  switch (status) {
    case 1: return 'success'
    case 0: return 'danger'
    default: return 'info'
  }
}

// 获取状态文本
const getStatusText = (status: number) => {
  switch (status) {
    case 1: return '启用'
    case 0: return '停用'
    default: return '未知'
  }
}
</script>

<style scoped>
/* 组件样式 */
</style>